<template>
  <el-dialog title="角色权限设置" width="70%" :before-close="handleClose">
    <div class="alert alert-info">
      <el-icon>
        <InfoFilled />
      </el-icon>
      当前正在为角色 <strong>{{ currentRole.name }}</strong> 设置权限。
    </div>

    <el-tabs v-model="activeTab" class="permission-tabs">
      <el-tab-pane label="系统权限" name="system">
        <el-tree
          :data="systemPermissions"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkedSystemPermissions"
          ref="systemTreeRef"
        ></el-tree>
      </el-tab-pane>
      <el-tab-pane label="课程权限" name="course">
        <el-tree
          :data="coursePermissions"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkedCoursePermissions"
          ref="courseTreeRef"
        ></el-tree>
      </el-tab-pane>
      <el-tab-pane label="考核权限" name="assessment">
        <el-tree
          :data="assessmentPermissions"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkedAssessmentPermissions"
          ref="assessmentTreeRef"
        ></el-tree>
      </el-tab-pane>
      <el-tab-pane label="培训计划权限" name="plan">
        <el-tree
          :data="planPermissions"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkedPlanPermissions"
          ref="planTreeRef"
        ></el-tree>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePermissions">保存权限</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import { InfoFilled } from "@element-plus/icons-vue";

const dialogVisible = ref(false);
const currentRole = reactive({ name: "" });
const activeTab = ref("system");

const systemTreeRef = ref(null);
const courseTreeRef = ref(null);
const assessmentTreeRef = ref(null);
const planTreeRef = ref(null);

// Dummy data for permissions - replace with actual data from your backend
const systemPermissions = reactive([
  {
    id: 1,
    label: "用户管理",
    children: [
      { id: 11, label: "创建用户" },
      { id: 12, label: "编辑用户" },
      { id: 13, label: "删除用户" },
      { id: 14, label: "设置用户权限" },
    ],
  },
  {
    id: 2,
    label: "角色管理",
    children: [
      { id: 21, label: "创建角色" },
      { id: 22, label: "编辑角色" },
      { id: 23, label: "删除角色" },
      { id: 24, label: "设置角色权限" },
    ],
  },
  { id: 3, label: "系统设置" },
  { id: 4, label: "日志审计" },
]);

const coursePermissions = reactive([
  {
    id: 5,
    label: "课程管理",
    children: [
      { id: 51, label: "创建课程" },
      { id: 52, label: "编辑课程" },
      { id: 53, label: "删除课程" },
      { id: 54, label: "审核课程" },
    ],
  },
  { id: 6, label: "课程分类管理" },
  {
    id: 7,
    label: "作业管理",
    children: [
      { id: 71, label: "创建作业" },
      { id: 72, label: "批改作业" },
    ],
  },
]);

const assessmentPermissions = reactive([
  {
    id: 8,
    label: "考核管理",
    children: [
      { id: 81, label: "创建考核" },
      { id: 82, label: "编辑考核" },
      { id: 83, label: "删除考核" },
      { id: 84, label: "发布考核" },
    ],
  },
  {
    id: 9,
    label: "题库管理",
    children: [
      { id: 91, label: "创建题目" },
      { id: 92, label: "编辑题目" },
      { id: 93, label: "删除题目" },
      { id: 94, label: "导入题目" },
    ],
  },
]);

const planPermissions = reactive([
  {
    id: 10,
    label: "培训计划管理",
    children: [
      { id: 101, label: "创建培训计划" },
      { id: 102, label: "编辑培训计划" },
      { id: 103, label: "删除培训计划" },
      { id: 104, label: "发布培训计划" },
    ],
  },
  { id: 11, label: "计划模板管理" },
  { id: 12, label: "计划数据分析" },
]);

// Dummy data for checked permissions - replace with actual data from your backend
const checkedSystemPermissions = ref([]);
const checkedCoursePermissions = ref([]);
const checkedAssessmentPermissions = ref([]);
const checkedPlanPermissions = ref([]);

const handleClose = (done) => {
  done();
};

const savePermissions = () => {
  const systemCheckedKeys = systemTreeRef.value.getCheckedKeys();
  const courseCheckedKeys = courseTreeRef.value.getCheckedKeys();
  const assessmentCheckedKeys = assessmentTreeRef.value.getCheckedKeys();
  const planCheckedKeys = planTreeRef.value.getCheckedKeys();

  console.log("Saving permissions for role:", currentRole.name);
  console.log("System Permissions:", systemCheckedKeys);
  console.log("Course Permissions:", courseCheckedKeys);
  console.log("Assessment Permissions:", assessmentCheckedKeys);
  console.log("Plan Permissions:", planCheckedKeys);

  // Implement save logic here
  dialogVisible.value = false;
};

const open = (roleData) => {
  Object.assign(currentRole, roleData);
  dialogVisible.value = true;
  // Simulate fetching permissions for the role
  // In a real application, you would fetch these from an API
  checkedSystemPermissions.value = [1, 11, 12, 13, 14, 2, 21, 22, 23, 24, 3, 4];
  checkedCoursePermissions.value = [5, 51, 52, 53, 54, 6, 7, 71, 72];
  checkedAssessmentPermissions.value = [8, 81, 82, 83, 84, 9, 91, 92, 93, 94];
  checkedPlanPermissions.value = [10, 101, 102, 103, 104, 11, 12];

  // Ensure trees are updated after dialog opens and data is set
  nextTick(() => {
    systemTreeRef.value.setCheckedKeys(checkedSystemPermissions.value, false);
    courseTreeRef.value.setCheckedKeys(checkedCoursePermissions.value, false);
    assessmentTreeRef.value.setCheckedKeys(
      checkedAssessmentPermissions.value,
      false,
    );
    planTreeRef.value.setCheckedKeys(checkedPlanPermissions.value, false);
  });
};

defineExpose({
  open,
});
</script>

<style scoped>
.permission-tabs .el-tree {
  margin-top: 10px;
}
</style>
